<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" style="background-color: black;"></canvas>
</body>
<script>

    function getArr(num, benchmark) {
        let arr = [];
        for (let i = num; i <= benchmark; i++) {
            arr.push(i);
        }

        for (let i = 1; i <= num - 1; i++) {
            arr.push(i);
        }

        return arr;
    }

    window.onload = function () {
        const canvas = document.getElementById('canvas');
        const cxt = canvas.getContext('2d');

        let x;
        let y;

        let second;
        let secondArr = [];

        let minute;
        let minuteArr = [];

        let hour;
        let hourArr = [];

        let month;
        let monthArr = [];

        let day = [];
        let dayArr = [];

        let year;

        const width = window.innerWidth;
        const height = window.innerHeight;

        canvas.width = width;
        canvas.height = height;

        cxt.font = "bold 12px Arial";

        setInterval(() => {

            cxt.clearRect(0, 0, width, height);

            second = new Date().getSeconds() + 1;
            minute = new Date().getMinutes() + 1;
            hour = new Date().getHours() + 1;
            day = new Date().getDate();
            month = new Date().getMonth() + 1;
            year = new Date().getFullYear();

            secondArr = getArr(second,60);
            minuteArr = getArr(minute,60);
            hourArr = getArr(hour,24);
            dayArr = getArr(day+1,31);
            monthArr = getArr(month+1,12);


            for (let i = 1; i <= 60; i++) {
                x = 290 * Math.sin(Math.PI / 30 * i);
                y = 290 * Math.cos(Math.PI / 30 * i);

                cxt.beginPath();

                if (i == 60) {
                    cxt.fillStyle = '#930974';
                    if(secondArr[i - 1] <= 9){
                        
                        cxt.fillText('0'+ secondArr[i - 1]+ '秒', width / 2 + x, height / 2 - y);
                    }
                    else{
                        
                        cxt.fillText(secondArr[i - 1]+ '秒', width / 2 + x, height / 2 - y);
                    }

                }
                else {
                    if(secondArr[i - 1] <= 9){
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText('0'+ secondArr[i - 1] + '秒', width / 2 + x, height / 2 - y);
                    }
                    else{
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText(secondArr[i - 1] + '秒', width / 2 + x, height / 2 - y);
                    }

                }

                cxt.fill();
                cxt.closePath();

            }

            for (let i = 1; i <= 60; i++) {
                x = 250 * Math.sin(Math.PI / 30 * i);
                y = 250 * Math.cos(Math.PI / 30 * i);

                cxt.beginPath();

                if (i == 60) {
                    cxt.fillStyle = '#930974';
                    if(minuteArr[i - 1] <= 9){
                       
                        cxt.fillText('0'+ minuteArr[i - 1]+ '分', width / 2 + x, height / 2 - y);
                    }
                    else{
                        
                        cxt.fillText(minuteArr[i - 1]+ '分', width / 2 + x, height / 2 - y);
                    }

                }
                else {
                    if(minuteArr[i - 1] <= 9){
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText('0'+ minuteArr[i - 1]+ '分', width / 2 + x, height / 2 - y);
                    }
                    else{
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText(minuteArr[i - 1]+ '分', width / 2 + x, height / 2 - y);
                    }
                }

                cxt.fill();
                cxt.closePath();

            }

            for (let i = 1; i <= 24; i++) {
                x = 200 * Math.sin(Math.PI / 12 * i);
                y = 200 * Math.cos(Math.PI / 12 * i);

                cxt.beginPath();

                if (i == 24) {
                    cxt.fillStyle = '#930974';
                    if(hourArr[i - 1] <= 9){
                        
                        cxt.fillText('0'+ hourArr[i - 1]+ '时', width / 2 + x, height / 2 - y);
                    }
                    else{
                        
                        cxt.fillText(hourArr[i - 1]+ '时', width / 2 + x, height / 2 - y);
                    }


                }
                else {
                    if(hourArr[i - 1] <= 9){
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText('0'+ hourArr[i - 1] + '时', width / 2 + x, height / 2 - y);
                    }
                    else{
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText(hourArr[i - 1] + '时', width / 2 + x, height / 2 - y);
                    }

                }

                cxt.fill();
                cxt.closePath();

            }

            for (let i = 1; i <= 12; i++) {
                x = 80 * Math.sin(Math.PI / 6 * i);
                y = 80 * Math.cos(Math.PI / 6 * i);

                cxt.beginPath();

                if (i == 12) {
                    cxt.fillStyle = '#930974';
                    if(monthArr[i - 1] <= 9){
                        
                        cxt.fillText('0'+ monthArr[i - 1] + '日', width / 2 + x, height / 2 - y);
                    }
                    else{
                        
                        cxt.fillText(monthArr[i - 1] + '日', width / 2 + x, height / 2 - y);
                    }

                }
                else {
                    if(monthArr[i - 1] <= 9){
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText('0'+ monthArr[i - 1] + '日', width / 2 + x, height / 2 - y);
                    }
                    else{
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText(monthArr[i - 1] + '日', width / 2 + x, height / 2 - y);
                    }

                }

                cxt.fill();
                cxt.closePath();

            }

            for (let i = 1; i <= 31; i++) {
                x = 150 * Math.sin(2 * Math.PI / 31 * i);
                y = 150 * Math.cos(2 * Math.PI / 31 * i);

                cxt.beginPath();

                if (i == 31) {
                    cxt.fillStyle = '#930974';
                
                    if(dayArr[i - 1] <= 9){
                        cxt.fillText('0'+ dayArr[i - 1] + '月', width / 2 + x, height / 2 - y);
                    }
                    else{
                        cxt.fillText(dayArr[i - 1]+ '月', width / 2 + x, height / 2 - y);
                    }

                }
                else {
                    if(dayArr[i - 1] <= 9){
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText('0'+ dayArr[i - 1]+ '月', width / 2 + x, height / 2 - y);
                    }
                    else{
                        cxt.fillStyle = '#b2bcc5';
                        cxt.fillText(dayArr[i - 1]+ '月', width / 2 + x, height / 2 - y);
                    }

                }

                cxt.fill();
                cxt.closePath();

            }
            


            cxt.beginPath();
            cxt.fillStyle = '#930974';
            cxt.fillText(year + '年',width / 2 - 5,height / 2 - 5);
            cxt.closePath();

            secondArr.length = 0;
            minuteArr.length = 0;
            hourArr.length = 0;
            monthArr.length = 0;
            dayArr.length = 0;

        }, 1000)


    }
</script>

</html>